<template>
  <div class="menuBox move">
    <div class="con_head" >
      <div class="center_logo">
        <span>WATER SYSTEM</span>
      </div>
    </div>
    <div class="all">
      <!-- 展开菜单 -->
      <div class="full_menu" ref="full_menu">
        <div class="menu_detail">
          <div v-for="(item,index) in totalMenu" :key="index">
            <a class="menu_item" :class="{'active':menuIndex===index}" @click="chooseMenu(index)" >
              <div>
                <i :class="item.code" class="choose_icon" :style="menuIndex===index?'color:#6687f9':''"></i>
              </div>
              <span class="item_name">
                {{item.name}}
                <i v-if="item.childPermissions&&Object.keys(item.childPermissions).length!==0&&item.level!==2"
                   :class="menuIndex===index?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
              </span>
            </a>
            <div class="second_box" id="second" v-if="menuIndex===index&&item.level!==2">
              <div class="second_line" v-for="(sitem,sindex) in item.childPermissions" :key="sindex">
                <a @click="chooseSecond(index,sindex,sitem.url,sitem.id,sitem.name)" :class="{'second_choose':secondIndex===sindex}">{{sitem.name}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['total'],
  data() {
    return {
      menuIndex: localStorage.getItem('water_first'),
      secondIndex:localStorage.getItem('water_second'),
      totalMenu: [
        {
          name:'管理员管理',
          code:'el-icon-user',
          url:'/UserInfo',
          childPermissions:[
            {
              name:'权限管理',
              url:'/LimitManage',
              id:71,
            }, {
              name:'角色管理',
              url:'/RoleManage',
              id:72,
            } ,{
              name:'用户管理',
              url:'/UserManage',
              id:73,
            },{
              name:'操作日志',
              url:'LogManage',
              id:74,
            }
          ]
        },
      ],
      userId:'',
    }
  },
  mounted() {
    // 获取左侧菜单
    let tmenu = localStorage.getItem('tree');

    if (tmenu) {
      let m = JSON.parse(tmenu);

      if (m.length!==0){
        this.totalMenu = m;
      }
    }else {
      this.$router.push('/')
    }

    //获取当前菜单索引
    let one = localStorage.getItem('water_first');
    let two = localStorage.getItem('water_second');
    this.menuIndex = one ? parseInt(one) : this.menuIndex;
    this.secondIndex = two ? parseInt(two) : this.secondIndex;
  },
  methods: {
    // 一级菜单选择
    chooseMenu(e) {
      let that = this;
      let url = !that.totalMenu[e].childPermissions||that.totalMenu[e].childPermissions.length === 0||that.totalMenu[e].childPermissions[0].level===3 ? that.totalMenu[e].url : that.totalMenu[e].childPermissions[0].url;
      let id = !that.totalMenu[e].childPermissions||that.totalMenu[e].childPermissions.length === 0||that.totalMenu[e].childPermissions[0].level===3 ? that.totalMenu[e].id : that.totalMenu[e].childPermissions[0].id;
      let name = that.totalMenu[e].childPermissions[0].name;

      // console.log(that.totalMenu[e].childPermissions[0].name)
      if (url) {
        if (that.menuIndex === e) {
          that.menuIndex = '';
        } else {
          this.setIndex(e, 0);
          // 没有子类时，直接跳转，有子类时，跳到第一个
          if (this.$route.path !== url) {
            that.$router.push({
              path:(url && url.substring(0, 1) === '/' ? url : '/' + url),
              query:{
                key:id,
                name:name
              }
            })
          }
        }
      } else {
        that.$notify({
          title: '提示',
          message: '该菜单下暂无子菜单！',
          position: 'bottom-left',
          showClose: false,
          duration: 1500,
          type: 'warning'
        });
      }
    },

    // 二级菜单选择
    chooseSecond(findex, sindex, url,id,name) {
      // let name = this.totalMenu[findex].name?this.totalMenu[findex].name:'';
      this.setIndex(findex, sindex);
      if (this.$route.fullPath !== (url+'?key='+id)){
        this.$router.push({
          path:url,
          query:{
            key:id,
          }
        });
      }
    },

    // 设置菜单索引值
    setIndex(first, second) {
      this.menuIndex = first;
      this.secondIndex = second;
      localStorage.setItem('water_first', first);
      localStorage.setItem('water_second', second);
    },
  },
  watch:{
  }
}
</script>

<style scoped>
.menuBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 214px;
  z-index:1;
  padding-top: 60px;
  background-color: #000;
}

.con_head {
  width: 100%;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 59px;
  /*border-bottom: 1px solid #f2f2f2;*/
  background-color: #526abb;
}

.con_head .btn_icon {
  width: 60px;
  height: 59px;
  background: #6687f9;
  position: relative;
}

.con_head .menu_icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  cursor: pointer;
}

.center_logo {
  width: 100%;
  height: 59px;
  text-align: center;
  color:#fff;
}

.center_logo span {
  display: block;
  line-height: 59px;
  font-size: 18px;
  font-weight: 600;
}

.full_menu {
  padding: 40px 0;
}

.short_head {
  left: 154px;
}

.to_close {
  left: -154px;
}

.all {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.menu_detail {
  color: #fff;
}

.has_tip {
  display: none !important;
}

.menu_item {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 20px;
}

.menu_item i {
  font-size: 16px;
  margin-left: 8px;
  color:#fff;
}

.menu_item div {
  display: flex;
  align-items: center;
  width: 30px;
  height: 30px;
  justify-content: center;
}

.menu_item div img {
  width: 20px;
  height: 20px;
}

.item_name {
  margin-left: 5px;
  letter-spacing: 1px;
}

.menu_item:hover {
  color: #6687f9;
  background: rgba(209, 240, 255, 0.3);;
}

.menu_item:hover i {
  color: #6687f9;
}

.active {
  color: #6687f9;
  background:rgba(209, 240, 255, 0.3);
}

.active i {
  color: #6687f9;
}

.second_box {
  color: #fff;
  padding-left: 55px;
  text-align: left;
  font-size: 14px;
  background: #030619;
}

.second_box a {
  display: block;
  line-height: 40px;
  height: 40px;
  cursor: pointer;
  color: #c1c1c1;
}

.second_box a:hover {
  color: #6687f9;
}

.second_box .second_choose {
  color: #6687f9;
}

.second_line div a {
  display: block;
  line-height: 40px;
  height: 40px;
  padding-left: 20px;
  color: #999999;
  cursor: pointer;
}

.second_line i {
  margin-right: 6px;
  font-size: 16px;
}

</style>

